/**
 * 作业管理——待提交
 */

import { LineChartOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { history } from '@/.umi/core/history';
import {
  DatePicker,
  Space,
  Input,
  Select,
  Table,
  Tag,
  Tabs,
  Button,
  Form,
} from 'antd';
import React, { useState } from 'react';
import request from '@/http';
import All_style from '../../index.less';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    title: '发布时间',
    dataIndex: 'work_pubtime',
    key: 'work_pubtime',
  },
  {
    title: '项目名称',
    dataIndex: 'course_name',
    key: 'course_name',
  },
  {
    title: '作业主题',
    dataIndex: 'work_title',
    key: 'work_title',
  },
  {
    title: '作业类型',
    dataIndex: 'work_type',
    key: 'work_type',
  },
  {
    title: '实训老师',
    dataIndex: 'teacherName',
    key: 'teacherName',
  },
  {
    title: '计划完成时间',
    dataIndex: 'work_plantime',
    key: 'work_plantime',
  },
  {
    title: '作业完成状态',
    dataIndex: 'wc_stat',
    key: 'wc_stat',
  },
  {
    title: '实际完成时间',
    dataIndex: 'wc_completetim',
    key: 'wc_completetim',
  },
  {
    title: '得分',
    dataIndex: 'score',
    key: 'score',
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',

    render: (row: any) => (
      <>
        {/* {row.wc_stat === '待提交' ? ( */}
        <Button
          type="link"
          onClick={() => {
            history.push(`/Student/TaskManagement/StudentAnswer`);
          }}
        >
          答题
        </Button>
        {/* ) : (
           <p></p>
         )} */}
      </>
    ),
  },
];
const dataOld = [
  {
    id: '',
    key: '1',
    work_pubtime: '2021-6-8',
    course_name: 'java',
    work_title: 'java',
    work_type: 'java',
    teacher_name: '刘胜会',
    work_plantime: '2021-6-2',
    wc_stat: '未提交',
    wc_completetim: '2021-9-7',
    active: '答题',
  },
];

const Tasks = (props: any) => {
  // 项目名称绑定接口
  const [courseName, setCourseName] = React.useState([]);
  const getCourseName = async () => {
    const CourseName: any = await request.put(
      '/user_info_manage/getCourseName',
    );
    setCourseName(CourseName.data);
  };

  const [workType, setWorkType] = React.useState([]);
  const getWorkType = async () => {
    const WorkType: any = await request.put('/user_info_manage/getWorkType');
    setWorkType(WorkType.data);
  };

  const [teacherName, setTeacherName] = React.useState([]);
  const getTeacherName = async () => {
    const TeacherName: any = await request.put(
      '/user_info_manage/getTeacherName',
    );
    setTeacherName(TeacherName.data);
  };
  /**------------------------------------------------------------------------------ */
  const [data, setData] = React.useState(dataOld);
  //显示
  const [formObject] = Form.useForm();
  interface pageInfoTypes {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page, pageSize) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pageInfoTypes>({
    current: 1,
    pageSize: 5,
    total: 0,
    onChange: onCurrentChange,
  });
  const loadData = async (current, pageSize) => {
    const datas = await formObject.validateFields();
    console.log(datas);
    const result: any = await request.post(
      '/homeWork_manager_module/student/queryHomeWorkInfo',
      {
        page: current,
        number: pageSize,
        wcState: 0,
        ...datas,
        vacationEndDate: datas?.workPubTime
          ? datas?.workPubTime[1]?.format('YYYY-MM-DD HH:mm:ss')
          : '',
        vacationBeginDate: datas?.workPubTime
          ? datas?.workPubTime[0]?.format('YYYY-MM-DD HH:mm:ss')
          : '',
        workPlanTime: datas?.workPlanTime
          ? datas?.workPlanTime?.format('YYYY-MM-DD HH:mm:ss')
          : '',
      },
    );
    console.log(result.data);
    if (result.success) {
      const newData = result.data.returnDate.map((d) => {
        return {
          id: d.id,
          key: `key_{d.id}`,
          courseId: d.courseId,
          work_pubtime: d.workPubTime,
          course_name: d.courseName,
          work_title: d.workTitle,
          work_type: d.workType,
          teacher_name: d.teacherId,
          work_plantime: d.workPlanTime,
          wc_stat: '未完成',
          teacherName: d.teacherName,
          wc_completetim: d.wcCompleteTime,
          score: d.wcScore,
        };
      });
      setData(newData);
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
    }
  };
  //查询

  //重置按钮
  const onReset = () => {
    formObject.resetFields();
  };
  React.useEffect(() => {
    loadData(pageInfo.current, pageInfo.pageSize);
    getCourseName();
    getWorkType();
    getTeacherName();
  }, []);

  return (
    <div className={All_style.box}>
      <Form name="SelectLeaveForm" form={formObject} preserve={false}>
        <div>
          <Form.Item
            name="workPubTime"
            label="发布时间："
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <RangePicker showTime className={All_style.select} />
          </Form.Item>

          <Form.Item
            name="courseName"
            label="项目名称："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select placeholder="请选择" className={All_style.select}>
              {courseName.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            name="workTitle"
            label="作业主题："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Input placeholder="请录入" className={All_style.select}></Input>
          </Form.Item>

          <div style={{ clear: 'both' }}>
            <Form.Item
              name="workType"
              label="作业类型："
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {workType.map((c, index) => {
                  return (
                    <Option key={`k_${index}`} value={c}>
                      {c}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              name="teacherName"
              label="老师："
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {teacherName.map((c, index) => {
                  return (
                    <Option key={`k_${index}`} value={c}>
                      {c}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              name="workPlanTime"
              label="计划完成时间："
              style={{ float: 'left' }}
              className={All_style.data}
            >
              <DatePicker showTime className={All_style.select} />
            </Form.Item>
          </div>
          <div style={{ clear: 'both', float: 'right', marginRight: 80 }}>
            <Button
              className={All_style.button}
              onClick={() => loadData(pageInfo.current, pageInfo.pageSize)}
            >
              查询
            </Button>
            <Button
              className={All_style.button2}
              htmlType="button"
              onClick={onReset}
            >
              重置
            </Button>
          </div>
        </div>
      </Form>
      <Table
        columns={columns}
        dataSource={data}
        rowKey={(record) => {
          return record?.id + Date.now(); //在这里加上一个时间戳就可以了
        }}
        className={All_style.table}
        pagination={pageInfo}
      />
    </div>
  );
};
export default Tasks;
